<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenFeign测试</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" href="/announcements">校园公告系统</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="/announcements">公告列表</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/announcements/add">新增公告</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/lb-test">负载均衡测试</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/feign-test">OpenFeign测试</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/circuit-test">熔断测试</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="http://127.0.0.1:9411/" target="_blank">链路跟踪</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="card">
            <div class="card-header bg-primary text-white">
                <h3>OpenFeign测试页面</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8">
                        <div class="input-group mb-3">
                            <input type="text" id="searchInput" class="form-control" placeholder="请输入新闻标题...">
                            <button class="btn btn-primary" type="button" id="searchButton">
                                <i class="bi bi-search"></i> 搜索
                            </button>
                        </div>
                    </div>
                </div>
                <div id="result" class="mt-4">
                    <!-- 结果将在这里显示 -->
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            function performSearch() {
                const searchTitle = $('#searchInput').val().trim();
                if (!searchTitle) {
                    $('#result').html(
                        '<div class="alert alert-warning">' +
                        '<h4 class="alert-heading">提示</h4>' +
                        '<hr>' +
                        '<p>请输入要搜索的新闻标题</p>' +
                        '</div>'
                    );
                    return;
                }

                const button = $('#searchButton');
                button.prop('disabled', true);
                button.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 搜索中...');
                
                $.ajax({
                    url: '/feign-test/search',
                    method: 'GET',
                    data: { title: searchTitle },
                    success: function(response) {
                        let resultHtml = '<div class="alert alert-success">';
                        resultHtml += '<h4 class="alert-heading">搜索成功！</h4>';
                        resultHtml += '<hr>';
                        resultHtml += '<div class="search-result">' + response + '</div>';
                        resultHtml += '</div>';
                        $('#result').html(resultHtml);
                    },
                    error: function(xhr, status, error) {
                        $('#result').html(
                            '<div class="alert alert-danger">' +
                            '<h4 class="alert-heading">错误！</h4>' +
                            '<hr>' +
                            '<p>搜索失败：' + error + '</p>' +
                            '</div>'
                        );
                    },
                    complete: function() {
                        button.prop('disabled', false);
                        button.html('<i class="bi bi-search"></i> 搜索');
                    }
                });
            }

            // 点击搜索按钮时执行搜索
            $('#searchButton').click(performSearch);

            // 在输入框中按回车键时也执行搜索
            $('#searchInput').keypress(function(e) {
                if (e.which == 13) { // Enter键的keyCode是13
                    performSearch();
                }
            });
        });
    </script>
</body>
</html> 